<!--
 * @Author: wjc
 * @Date: 2025-02-13 14:52:31
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 14:30:13
 * @Description: 
-->
<template>
  <i :class="iconName" :style="iconStyle" v-bind="$attrs"></i>
</template>

<script setup lang="ts">
  import type { CSSProperties } from 'vue'

  import { addUnit } from '#/utils/dom/style'

  export interface IconProps {
    // 图标颜色
    color?: string
    /**
     * 图标名称
     * 名称参照 @iconify-json/[图标集合] 中的名称
     * 如： element-plus 的 plus 图标：i-ep-plus，则 name 为 ep-plus
     */
    name: string
    // 图标大小
    size?: number | string
  }

  defineOptions({
    name: 'Icon',
  })

  const props = defineProps<IconProps>()

  const iconName = computed(() => `i-${props.name}`)
  const iconStyle = computed<CSSProperties>(() => {
    if (props.size === 0 && !props.color) return {}

    return {
      fontSize: props.size === undefined ? undefined : addUnit(props.size),
      color: props.color || undefined,
    }
  })
</script>
